<$
var paragraphs = page.paragraphs(areaName);
var mustCloseContainer = false;
var paracount = paragraphs.count;
var rowCount = 0;
for ( var ipar = 0; ipar < paracount; ++ipar ){
var hideTriangle = false;
var additionalRowClass = "";
var paragraph = paragraphs.item(ipar);
if ( ipar < paracount-1 ){
var nextparagraph = paragraphs.item(ipar+1);
}
else{
var nextparagraph = null;
}
var container = paragraph.container;
var columns = paragraph.columns;
if ( paragraph.hasArticles && container && canContainer ) {
var containerstyle = container.inlineCss || "";
containerstyle = containerstyle.toString().replace(/^\s+|\s+$/gm,''); // trim()
// make sure the users inlineCss properly ends with a semicolon as we attach more styles later below
if ( containerstyle && containerstyle.slice(-1) !== ";" ){
containerstyle += ";";
}
var image = container.cssBackgroundImage("bgimage");
var color = container.value("bgcolor");
if ( color && color !== "transparent" ){
containerstyle += " background-color: " + color + ";";
}
if ( image.imageUrl ){
// TODO: figure out syntax to get bgimage and imagesize from image object
containerstyle += " background-image: url(" + image.imageUrl + ");";
containerstyle += " background-repeat: " + image.repeat + ";";
containerstyle += " background-size: " + image.size + ";";
containerstyle += " background-position: " + (image.position !== "" ? image.position : "center center") + ";";
containerstyle += " background-attachment: " + (image.attachment !== "" ? image.attachment : "scroll") + ";";
}
containerstyle = containerstyle.replace(/^\s+|\s+$/gm,''); // trim()
if ( containerstyle ){
containerstyle = ' style="' + containerstyle + '"';
hideTriangle = true;
}
if ( mustCloseContainer ) {
context.write("
");
}
mustCloseContainer = true;
if ( noBreakoutWithNews && system.preview && container.value("breakout") == "1" && hasNews ){
system.warn("Die 'Randlos-Option' für einen Container kann nicht berücksichtigt werden, weil der 'Einfügen-Schalter' auf an steht oder die Seite auch Artikel im News-Bereich enthält.");
}
$>
zpBreakout <$ } $><$ if( noBreakoutWithNews && hasNews ) { $> hasNews<$ } $> <$= container.cssClass $>"<$= containerstyle $>>
<$
}
// if current paragraph doesn't contain articles, we skip the loop, so we don't print empty paragraphs
var articleCount = paragraph.articles.count;
if ( articleCount < 1 ){
continue;
}
else{
++rowCount;
// set special rowClass for Articles which are not visible, so we can remove any margins which might nor be desired
var firstWidgetName = paragraph.articles.item(0).widgetName;
switch(firstWidgetName) {
case "Info-Banner":
additionalRowClass = " alertbanner";
break;
case "Quelltext":
additionalRowClass = " quelltext";
break;
case "Slider":
additionalRowClass = " zpwSlider";
break;
case "Carousel":
additionalRowClass = " zpwCarousel";
break;
case "Navigationsmenü":
additionalRowClass = " zpwNavmenu";
break;
}
}
// paragraph styles
var rowstyle = paragraph.inlineCss || "";
rowstyle = rowstyle.toString().replace(/^\s+|\s+$/gm,''); // trim();
// make sure the users inlineCss properly ends with a semicolon as we attach more styles later below
if ( rowstyle && rowstyle.slice(-1) !== ";" ){
rowstyle += ";";
}
var style = "";
if ( nextparagraph ){
if ( (nextparagraph.value("bgcolor") && nextparagraph.value("bgcolor") !== "transparent") || nextparagraph.value("bgimage") ){
hideTriangle = true;
}
}
if ( paragraph.value("bgcolor") && paragraph.value("bgcolor") !== "transparent" ){
style += " background-color: " + paragraph.value("bgcolor") + ";";
}
if ( paragraph.value("bgimage") ){
var image = project.getImage(paragraph.value("bgimage"));
style += " background-image: url(" + image.workingCopyPath + ");";
style += " background-repeat: no-repeat;";
style += " background-size: " + paragraph.value("bgimagesize", "cover") + ";";
if ( paragraph.value("bgimagesize") == "contain" ){
style += " background-position: center;";
}
}
if ( parseInt(paragraph.value("minheight", 0)) !== 0 ){ // parseInt() because the value could be "0px"
style += " min-height: " + paragraph.value("minheight") + ";";
}
style = style.toString().replace(/^\s+|\s+$/gm,''); // trim()
if ( style || containerstyle ){
rowstyle = 'background-color: transparent; background-color: initial;';
}
if ( style ){
style = ' style="' + style + '"';
if ( hideTriangle ) {
rowstyle += " margin-bottom: 0;"
}
}
$>
<$ if ( paragraph.value("breakout") == "1" ){ $>
<$
rowstyle = " width: 100%; margin: 0 auto; float: none;";
}
rowstyle = rowstyle.replace(/^\s+|\s+$/gm,''); // trim()
if ( rowstyle ){
rowstyle = ' style="' + rowstyle + '"';
}
$>
>
>
<$
for ( var icol = 0; icol < columns.count; ++icol ){
var additionalColumnClass = "";
var column = columns.item(icol);
var articles = column.articles;
var clearCss = column.value("clearLeft") ? "clear: left;" : "";
var firstWidgetName = articles.item(0).widgetName;
if ( firstWidgetName == "Spacer" ){
additionalColumnClass = " zpSpacer";
}
// TODO move adding of missing classes to converter and remove next 4 lines
var columnCssClass = column.cssClass;
if ( !column.cssClass ){
columnCssClass = "c" + String(Math.round(12 / columns.count - 0.1)) ;
}
$>
>
<$
for ( var iart = 0; iart < articles.count; ++iart ){
var a = articles.item(iart);
context.write(a.render());
}
$>
<$
}
$>
<$ if ( !hideTriangle ){ $>
<$ } $>
<$ if ( paragraph.value("breakout") == "1" ){ $>
<$ } $>
<$
}
if ( mustCloseContainer ) {
context.write("